<html>
 <head>
   <title>Registration Form</title>
   <!---Cascade Style sheet (CSS)---------->
   <style type="text/css">
     /*on page style*/
   </style>
   <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
   <script type="text/javascript" src="js/jquery.validate.js"></script>
   <script type="text/javascript" src="js/register.validate.jquery.js"></script>

   <link href="./css/bootstrap.css" rel="stylesheet"/>
   <link href="./css/style.css" rel="stylesheet"/>

  </head>

  <body>
  <form id="registerId" enctype="multipart/form-data" name="register" method="post" action="saveuser.php">

    <table border="0" align="center" cellpadding="5" cellspacing="0" >
      <thead>
        <tr><th colspan="2">  </th></tr>
      </thead>
      <tbody>

        <tr>
          <td align="right">Name : </td>
          <td><input  name="uname" type="text" placeholder="my name is " value=""/></td>
        </tr>

        <tr>
          <td align="right">Email : </td>
          <td><input type="text" name="email"  placeholder="my email is " value=""/></td>
        </tr>

        <tr>
          <td align="right">Password : </td>
          <td><input type="password" name="password" id="passwordId" value="" placeholder="my password is "/></td>
        </tr>

        <tr>
          <td align="right">Confirm Password : </td>
          <td><input value="" type="password" name="conPassword"  placeholder="re-type password here "/></td>
        </tr>

        <tr>
          <td align="right">Gender : </td>
          <td>
            <label><input type="radio" name="gender" value="male" />Male</label>
            <label><input type="radio"  value="female" name="gender"/>Female</label><br/>
            <label for="gender" generated="true" class="error"></label>
          </td>
        </tr>

        <tr>
          <td align="right">Date of Birth : </td>
          <td><input type="date" name="dob" value="" placeholder="YYYY-MM-DD"/></td>
        </tr>

        <tr>
          <td align="right">Address : </td>
          <td>
            <textarea  name="address" placeholder="my address is"></textarea>
          </td>
        </tr>

        <tr>
          <td align="right">Country : </td>
          <td>
      <!---      <select name="country">
              <option value="">-SELECT-</option>
              <option value="in" selected>India</option>
              <option value="pk">pakistan</option>
              <option value="np">Nepal</option>
              <option value="ch">China</option>
              <option value="bn">BanglaDesh</option>
              <option value="sl">SriLanka</option>
              <option value="bh">Bhutan</option>
              <option value="af">Afganistan</option>
              <option value="my">Myanmar</option>
            </select>
            -->
            <div id="countryDivId"></div>
            <span id="countryLoaderId"></span>
          </td>
        </tr>

        <tr>
          <td align="right">Languages Known : </td>
          <td>
            <select multiple="true" size="5" style="height:100px;" name="lang[]">

              <option value="c">C</option>
              <option value="cpp">C++</option>
              <option value="php">Php</option>
              <option value="java">Java</option>
              <option value="dotnet">.Net</option>
              <option value="python">Python</option>
              <option value="ruby">Ruby</option>
              <option value="pascal">Pascal</option>
              <option value="perl">Perl</option>
            </select>
          </td>
        </tr>


        <tr>
          <td align="right">Hobbbies : </td>
          <td>
            <!--<div style="float:left;border:1px solid red;">-->
            <div class="parentCheckDiv">
              <div class="childCheckDiv">
                <label><input value="cricket" type="checkbox" name="hobbies[]"/>Cricket</label>
                <label><input value="hockey"  type="checkbox" name="hobbies[]"/>Hockey</label>
                <label><input type="checkbox" value="football"  name="hobbies[]"/>Football</label>
              </div>
              <div class="childCheckDiv">
                <label><input type="checkbox" value="badminton" name="hobbies[]"/>Badminton</label>
                <label><input  type="checkbox" value="volleyball" name="hobbies[]"/>Volleyball</label>
                <label><input value="chess"  type="checkbox" name="hobbies[]"/>Chess</label>
              </div>
              <div class="childCheckDiv">
              <label><input  value="tennis"  type="checkbox" name="hobbies[]"/>Tennis</label>
              <label><input type="checkbox" value="others"  name="hobbies[]"/>Others</label>
              </div>
            </div>
            <br>
              <label style="float:left;" for="hobbies[]" generated="true" class="error"></label>
          </td>
        </tr>

        <tr>
          <td align="right">Upload Image : </td>
          <td><input name="avatar" type="file"  /></td>
        </tr>

        <tr>
          <td align="right">&nbsp;</td>
          <td><input type="submit" value="I am done!!" class="btn-success btn-large" /></td>
        </tr>

      </tbody>
    </table>
   </form>
  </body>

</html>

<script type="text/javascript">
/*
  $(function(){
*/
  jQuery(document).ready(function(){
      var URL = 'ajax/countries.php';
      $.ajax({
        url:URL,
        data:{'id':23,'name':'ajay'},
        type:'POST',
        dataType:'json',
        beforeSend:function(){
          $('#countryLoaderId').html('<img src="img/loader.gif" />');
        },

        success:function(data){
var select = '<select name="country">';
$.each(data,function(key,value){
//console.log(key)
//console.log(value)
//console.log('--------------')
select += '<option value="'+key+'">'+value+'</option>';
});
select += '</select>';
console.log(select);
$('#countryDivId').html(select);
        },
        complete:function(){

         $('#countryLoaderId').html('');
        },
        error: function(xhr,status,error) {
        //   alert('Error: ' + status) ;
        }
      });

  });
</script>
